<template>
  <div class="control_head">
    <div class="row" v-for="(row, index) in list" :key="index">
      <div class="col" v-for="(col, colindex) in row" :key="colindex">
        <div class="label">{{ col.name }}</div>
        <div class="value">value</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        [
          {
            name: '型号',
            prop: '',
          },
          {
            name: '型别',
            prop: '',
          },
          {
            name: '发动机编号',
            prop: '',
          },
        ],
        [
          {
            name: '名称',
            prop: '',
          },
          {
            name: '部件编号',
            prop: '',
          },
          {
            name: '部件件号',
            prop: '',
          },
        ],
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss">
.control_head {
  .row,
  .col {
    display: flex;
    flex: 1;
    .label,
    .value {
      flex: 1;
      text-align: center;
    }
  }
  .row {
    border-bottom: 1px solid #000;
    .col {
      div {
        text-align: center;
        flex: 1;
        border-right: 1px solid #000;
      }
    }
    .col:last-child {
      div:last-child {
        border: none;
      }
    }
  }
}
</style>
